<template>
    <div>
        <!-- 顶部滑动条 -->
     		<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0?'mui-active':'']" v-for="item in cates" :key="item.id" @click="getPhotoListByCateId(item.id)">
							{{item.title}}
						</a>
					</div>
				</div>
			</div>
			<!-- 图片列表 -->
			<ul class="photo-list">
				<router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/'+item.id" tag="li">
					<img v-lazy="item.img_url">
					<div class="info">
						<h3 class="info-title">
							{{item.title}}
						</h3>
						<div class="info-body">{{item.zhaiyao}}</div>
					</div>
				</router-link>
			</ul>
    </div>
</template>

<script>
// 1.导入 mui 的js文件
import mui from '../../lib/mui/js/mui.min.js'
import icon1 from '../../images/1.png'
import icon2 from '../../images/2.png'
import icon3 from '../../images/3.png'
import icon4 from '../../images/4.png'
import icon5 from '../../images/5.png'
import icon6 from '../../images/6.png'

export default {
    data(){
        return {
			cates:[
				{id:0,title:"全部"},
				{id:1,title:"图片1"},
				{id:2,title:"图片2"},
				{id:3,title:"图片3"},
				{id:4,title:"图片4"},
				{id:5,title:"图片5"}
			],
			list:[]
        };
    },
    mounted(){//当 组件中的 DOM 结构被渲染好并放到页面中时触发的生命周期函数
        //2.初始化滑动控件
        mui('.mui-scroll-wrapper').scroll({
        	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
	created(){
		// getAllCategory();
		this.getPhotoListByCateId(0);
	},
    methods:{
		//获取图片分类
		// getAllCategory(){
		// 	this.$http.get("api/getimgcategory").then(result=>{
		// 		result.body.message.unshift({
		// 			title:"全部",
		// 			id:"0"
		// 		});
		// 		this.cates=result.body.message;
		// 	})
		// }，
		//获取图片列表
		// getPhotoListByCateId(cateId){
		// 	this.$http.get('api/getimgs/'+cateId).then(result=>{
		// 		if(result.body.status===0){
		// 			this.list=result.body.message;
		// 		}
		// 	})
		// }
		getPhotoListByCateId(cateId){
			var obj=[];
			switch (cateId) {
				case 0:
					obj=[
						{id:1,title:"图片标题1",img_url:icon1,zhaiyao:"图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1"},
						{id:2,title:"图片标题2",img_url:icon2,zhaiyao:"图片摘要2图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1"},
						{id:3,title:"图片标题3",img_url:icon3,zhaiyao:"图片摘要3图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1"},
						{id:4,title:"图片标题4",img_url:icon4,zhaiyao:"图片摘要4图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1"},
						{id:5,title:"图片标题5",img_url:icon5,zhaiyao:"图片摘要5图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1"},
						{id:6,title:"图片标题6",img_url:icon6,zhaiyao:"图片摘要6图片摘要1图片摘要1图片摘要1图片摘要1图片摘要1"}
					];
					break;
				case 1:
					obj=[{id:1,title:"图片标题1",img_url:icon1,zhaiyao:"图片摘要1"}];
					break;
				case 2:
					obj=[{id:2,title:"图片标题2",img_url:icon2,zhaiyao:"图片摘要2"}];
					break;
				case 3:
					obj=[{id:3,title:"图片标题3",img_url:icon3,zhaiyao:"图片摘要3"}];
					break;
				case 4:
					obj=[{id:4,title:"图片标题4",img_url:icon4,zhaiyao:"图片摘要4"}];
					break;
				case 5:
					obj=[{id:5,title:"图片标题5",img_url:icon5,zhaiyao:"图片摘要5"}];
				break;
				default:
					break;
			}
			this.list=obj;
		}
    }


}
</script>

<style lang="scss" scoped>
*{
    touch-action:pan-y;
}
.photo-list{
	list-style: none;
	padding: 10px;
	margin: 0;
	padding-bottom: 0;
	li{
		text-align: center;
		background-color: #ccc;
		margin-bottom: 10px;
		position: relative;
		img{
			width: 100%;
			vertical-align: middle;
			box-shadow: 0 0 9px #999;
		}
		img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
		}
		.info{
			color: white;
			position: absolute;
			bottom: 0;
			text-align: left;
			width: 100%;
			background-color: rgba(0,0,0,0.4);
			max-height: 84px;
			.info-title{
				font-size: 14px;
			}
			.info-body{
				font-size: 13px;
			}
		}
	}
}

</style>